<template>
	<view class="fu-p-30">
		<demo-desc>
			此组件一般用于显示一根线条，用于分隔内容块，有横向和竖向两种模式，且能设置0.5px线条，使用也很简单。
		</demo-desc>
		
		<fu-section title="基本案例" customClass="fu-m-t-20" type="line">
			<fu-line class="fu-m-t-20"></fu-line>
		</fu-section>
		
		<fu-section title="自定义颜色" customClass="fu-m-t-20" type="line">
			<fu-line class="fu-m-t-20" color="#dd524d"></fu-line>
		</fu-section>
		
		<fu-section title="自定义长度" customClass="fu-m-t-20" type="line">
			<fu-line class="fu-m-t-20" length="200"></fu-line>
		</fu-section>
		
		<fu-section title="自定义方向" customClass="fu-m-t-20" type="line">
			<fu-line class="fu-m-t-20" length="30" color="#dd524d" direction="col"></fu-line>
		</fu-section>
		
		<fu-section title="是否显示1px粗线条" customClass="fu-m-t-20" type="line">
			<fu-line class="fu-m-t-20" :hairline="false"></fu-line>
		</fu-section>
		
		<fu-section title="线条与上下左右元素的间距" customClass="fu-m-t-20" type="line">
			<fu-line margin="20"></fu-line>
		</fu-section>
		
		<fu-section title="是否虚线" customClass="fu-m-t-20" type="line">
			<fu-line class="fu-m-t-20" color="#dd524d" :dashed="true"></fu-line>
		</fu-section>
	</view>
</template>

<script>
</script>

<style lang="scss">
	page {
		background-color: $bg-color;
	}
</style>